    <template>
    <div>
        <el-row :gutter="15">
            <el-col :span="statement.status==0 ? 15 : 22" :offset="1" class="left">
                <!-- 左上结算单部分 -->
                    <el-row class="left-top">
                        <el-descriptions :column="2">
                        <el-descriptions-item label="客户姓名">{{ statement.customerName }}</el-descriptions-item>
                        <el-descriptions-item label="联系方式">{{ statement.customerPhone }}</el-descriptions-item>
                        <el-descriptions-item label="车牌号码">{{ statement.licensePlate }}</el-descriptions-item>
                        <el-descriptions-item label="汽车类型">{{ statement.carSeries }}</el-descriptions-item>
                        <el-descriptions-item label="服务类型">
                            <template>
                                <dict-tag :options="dict.type.appoint_serv_type" :value="statement.serviceType"/>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="到店时间">{{ statement.actualArrivalTime }}</el-descriptions-item>
                        <el-descriptions-item label="总消费金额">{{ totalSum }}</el-descriptions-item>
                        <el-descriptions-item label="实付金额">{{ payPrice }}</el-descriptions-item>
                        <el-descriptions-item label="优惠价格" v-if="statement.status==0">
                            <el-input  class="discountPricesInput"
                            size="mini" 
                            v-model="statement.discountAmount"
                            @change="changPrice"
                            ></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="优惠价格" v-if="statement.status==1">{{ statement.discountAmount }}</el-descriptions-item>
                        
                        </el-descriptions>
                    </el-row>
                <!-- 左下结算单明细部分 -->
                <el-row class="left-bottom">       
                    <el-col :span="24">
                        <!-- 按钮 -->
                        <el-row :gutter="10" class="mb8" v-if="statement.status==0">
                            <el-col :span="1.5">
                                <el-button
                                type="primary"
                                plain
                                icon="el-icon-plus"
                                size="mini"
                                @click="statementItemSave"
                                :disabled="saveFlag"
                                >保存</el-button>
                            </el-col>
                            <el-col :span="1.5" >
                                <el-button
                                type="warning"
                                plain
                                icon="el-icon-money"
                                size="mini"
                                @click="payHandle"
                                :disabled="payFlag"
                                >支付</el-button>
                            </el-col>
                        </el-row>
                        <!-- 表格数据 -->
                        <el-table v-loading="loading" :data="statementItemList" >
                            <el-table-column label="服务名称" align="center" prop="itemName" />
                            <el-table-column label="服务价格" align="center" prop="itemPrice" />
                            <el-table-column label="服务数量" align="center" prop="itemQuantity" />
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="statement.status==0">
                                <template slot-scope="scope">
                                <el-button
                                    size="small"
                                    type="primary"
                                    icon="el-icon-plus"
                                    @click="add(scope.$index)"
                                ></el-button>
                                <el-button
                                    size="small"
                                    type="danger"
                                    icon="el-icon-minus"
                                    @click="sub(scope.$index)"
                                ></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="page">
                            显示第 1 到第 {{ statementItemList.length }} 条记录，总共
                            {{ statementItemList.length }} 条记录
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="8" class="right" v-if="statement.status==0">
                <!-- 右上服务项高级搜索部分 -->
                <el-row class="right-top">
                    <el-col :span="24">
                        <el-form :model="queryParams"  size="small" :inline="true" label-width="68px">
                            <el-form-item label="服务名称" prop="name">
                                <el-input
                                v-model="queryParams.name"
                                placeholder="请输入服务名称"
                                clearable
                                @keyup.enter.native="handleQuery"
                                />
                            </el-form-item>
                            <el-form-item label="是否套餐" prop="carPackage">
                                <el-select v-model="queryParams.carPackage" placeholder="请选择是否套餐" clearable>
                                <el-option
                                    v-for="dict in dict.type.item_serv_package"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="服务分类" prop="serviceCatalog">
                                <el-select v-model="queryParams.serviceCatalog" placeholder="请选择服务分类" clearable>
                                <el-option
                                    v-for="dict in dict.type.item_serv_type"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button round type="success" icon="el-icon-search" size="medium" @click="handleQuery">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <!-- 右下服务项数据展示部分 -->
                <el-row class="right-bottom">
                    <el-col :span="24">
                        <!-- 表格数据 -->
                        <el-table v-loading="loading" :data="serviceItemList" >
                            <el-table-column label="服务名称" align="center" prop="name" />
                            <el-table-column label="服务价格" align="center" prop="originalPrice" />
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                <el-button
                                    size="small"
                                    icon="el-icon-plus"
                                    type="primary"
                                    @click="addStatementItemHandle(scope.row)"
                                ></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="page">
                            显示第 1条到第{{ serviceItemList.length }}  条记录，总共{{ serviceItemList.length }}
                            条记录
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
    </template>

    <script>
    import {getServiceItemList} from "@/api/business/serviceItem";
    import {getStatement} from "@/api/business/statement";
    import {statementItemSave,getListItem,pay} from "@/api/business/statementItem";
    export default{
    name:'statementItem',
    dicts:['item_serv_package','item_serv_type','appoint_serv_type'],
    data(){
        return{
            statementId:this.$route.params.statementId,//结算id
            statementItemList:[],  //结算单明细集合
            serviceItemList:[],   //服务项列表集合
            statement:{
            discountAmount:0, 
            },        //结算单数据
            payFlag:true,
            saveFlag:true,
            loading:false,       //遮罩层
            queryParams:{       //高级搜索
                name:null, 
                carPackage:null,
                serviceCatalog:null,
                saleStatus:1   //我们只要上架状态的数据
            },       
        }
    },
    created(){
        this.initData();     //页面数据初始化
    },
    methods:{
        //页面初始化数据方法
        initData(){
            //初始化已上架服务项数据serviceItemList
            this.getServiceItemListHandle();
            //初始化结算的那明细数据statementItemList
            this.getlistItemHandle();
            //初始化结算单数据statement
            this.getStatementHandle();
        },
        //查询已上架服务项数据
        getServiceItemListHandle(){
            getServiceItemList(this.queryParams).then(resp =>{
                this.serviceItemList = resp.data;
            })
        },
        
        getStatementHandle(){
            getStatement(this.statementId).then(resp =>{
                this.statement = resp.data;
            })
        },
        //查询结算单明细列表
        getlistItemHandle(){
             getListItem(this.statementId).then(resp =>{
                if(resp.data.length != 0){ 
                    this.saveFlag=true;
                    this.payFlag=false;
                }
                 this.statementItemList = resp.data;
            }) 
      },
       
        //点击右下服务项加号后添加结算的那明细数据
        addStatementItemHandle(row){
            //创建一个结算单明细对象
            let obj={
                itemName:row.name,
                itemPrice:row.originalPrice,
                itemQuantity:1,
                itemId:row.id,
                statementId:this.statementId
            }
            //判断是否是首次选择，是首次则执行添加，否则执行更新
            let index = this.getStatementItemIndexByServiceItemId(row.id);
            
            if(index>=0){
                //找到了执行更新操作
                this.statementItemList[index].itemQuantity++;
            }else{
                //找到了执行新增操作
                this.statementItemList.push(obj);
            }
                this.saveFlag=false;
                this.payFlag=true;
        },
        //根据服务项id在结算的那明细列表中查找是否存在
        getStatementItemIndexByServiceItemId(id){
            let i = -1;
            //遍历statementItemList 集合
            this.statementItemList.forEach((statementItem,index) =>{
                if(statementItem.itemId == id){
                    //找到了,返回对应索引
                    console.log("找到的索引:" +index)
                    i = index;
                    return;
                }
            })
            return i;
        },
        //服务项搜索部分
        handleQuery(){
        
        this.getServiceItemListHandle();
        },
        add(index){
            this.statementItemList[index].itemQuantity++;
                this.saveFlag=false;
                this.payFlag=true;
        },
        sub(index){
            if(this.statementItemList[index].itemQuantity == 1){
                this.saveFlag=true;
                this.payFlag=true;
                this.statementItemList.splice(index,1);
            }else{
            this.statementItemList[index].itemQuantity--;
            }
                
        },
        statementItemSave(){
            this.$modal.confirm("确定要保存当前明细项吗？").then(() =>{
                let data = {
                    discountPrice:this.statement.discountAmount,
                    statementItemList:this.statementItemList
                }
                statementItemSave(data).then(()=>{
                    this.$modal.msgSuccess("保存成功！")
                    this.saveFlag=true;
                    this.payFlag=false;
                })
            })
        },
        changPrice(){
            if(this.statement.discountAmount>this.totalSum || this.statement.discountAmount<0||
                isNaN(this.statement.discountAmount)){
                    this.$alert("输入的价格有误",{
                        confirmButtonText:"确定",
                        callback:(action)=>{
                            this.statement.discountAmount = 0;
                        }
                    })
                }
                this.saveFlag=false;
                this.payFlag=true;

        },
        payHandle(){
            this.$modal.confirm("确定要支付当前结算单吗？").then(() =>{
                pay(this.statementId).then(()=>{
                    this.$modal.msgSuccess("支付成功")
                    this.getStatementHandle();
                    this.saveFlag=true;
                    this.payFlag=true;
                })
            })
        }
     },
    computed:{
        totalSum(){
            let sum = 0;
            this.statementItemList.forEach(ele => {
                sum += ele.itemPrice * ele.itemQuantity
            })
            return sum;
        },
        payPrice(){
            let data = 0;
            if(this.statement.discountAmount<0){
                return this.totalSum;
            }
            if(this.totalSum - this.statement.discountAmount < 0){
                data = 0;
            }else{
                data = this.totalSum - this.statement.discountAmount
            }
            if(isNaN(data)){
                data=this.totalSum;
            }
            return data;
        },
    }
    }
    </script>


    <style>
    .left,.right{
        margin-top: 2%;
    }
    .left-top{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 4px;
        padding: 3% 6%; 
        
    }
    .discountPricesInput{
        width: 30%;
    }
    .left-bottom{
        margin-top: 2%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 4px;
        padding: 3% 2%; 
        
    }
    .page {
            line-height: 34px;
            font-size: 13px;
            color: #676a6c;
    }
    .right-top{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 4px;
        padding: 2% 6%;  
        margin-right: 5%; 
    }
    .right-bottom {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 4px;
        padding: 4% 6%;
        margin:5% 5% 0% 0%; 
    } 

    </style>